<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Actionsheet 选项弹出"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="基础用法">
      <hips-button
        type="primary"
        block
        @click="showAction = !showAction"
      >
        打开
      </hips-button>
      <hips-actionsheet
        v-model="showAction"
        :buttons="buttons"
        :cancel="cancelBtn"
        title="title"
        sub-title="sub title"
      />
    </demo-block>
    <demo-block title="作为插件使用">
      <hips-button
        type="primary"
        block
        @click="openActionSheet"
      >
        打开
      </hips-button>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Button } from '@hips/vue-ui';

export default {
  components: {    
    [Button.name]: Button,
  },
  mixins: [ BasicView ],
  data() {
    return {
      showAction: false,
      buttons: [],
      cancelBtn: {},
    };
  },

  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.buttons = [
        {
          text: '转发',
          closeAfterClick: false,
          handler: (index) => {
            vm.$hips.toast(`转发 - index = ${index}`);
          },
        },
        {
          text: '分享',
          handler: (index) => {
            vm.showAction = false;
            vm.$hips.toast(`分享 - index = ${index}`);
          },
        },
      ];

      vm.cancelBtn = {
        text: '取消',
        handler: () => {
          vm.$hips.toast(`取消`);
        },
      };
    });
  },

  methods: {
    openActionSheet() {
      this.$hips.actionsheet.show({
        theme: 'android',
        title: 'title',
        subTitle: 'sub title',
        buttons: [
          {
            text: '转发',
            closeAfterClick: true,
            handler: (index) => {
              this.$hips.toast(`转发 - index = ${index}`);
            },
          },
          {
            text: '分享',
            handler: (index) => {
              this.$hips.actionsheet.hide();
              this.$hips.toast(`分享 - index = ${index}`);
            },
          },
          {
            text: '删除',
            type: 'danger',
            handler: (index) => {
              this.$hips.toast(`删除 - index = ${index}`);
            },
          },
        ],
        cancel: {
          text: '取消',
          handler: () => {
            this.$hips.toast(`取消`);
          },
        },
      });
    },
  },
};
</script>

<style lang="stylus"></style>
